<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="lib/require.js" data-main="app.js"></script>
	<style type="text/css">
	*{
		margin: 0;
		padding: 0;
		border: 0;
		font-family: "微软雅黑",Arial;
	}
	body{
		background-color: #faf8ef;
	}
	#container{
		width: 500px;
		margin: auto;
	}
	#header{
		width: 100%;
		height: 112px;
		position: relative;
		margin-bottom: 10px;
	}
	#header .title{
		position: absolute;
		left: 0;
		top: 0;
	    font-size: 80px;
	    color: #776e65;
	}
	#score{
		position: absolute;
		background: #bbada0;
		padding: 15px 25px;
		font-size: 25px;
		height: 25px;
		line-height: 47px;
		font-weight: bold;
		border-radius: 3px;
		color: white;
		text-align: center;
		top: 8px;
		right: 0;
	}
	#score:after{
		content: "成绩";
	    position: absolute;
	    width: 100%;
	    top: 10px;
	    left: 0;
	    font-size: 13px;
	    line-height: 13px;
	    text-align: center;
	    color: #eee4da		
	}
	#restart{
		background: #8f7a66;
		border-radius: 3px;
		padding: 0 20px;
		text-decoration: none;
		color: #f9f6f2;
		height: 40px;
		line-height: 42px;
		text-align: center;	
		position: absolute;
		right: 0;
		bottom: 0;	
		cursor: pointer;
	}
	#main{
		width: 500px;
		height: 500px;
		background-color: #bbada0;
		border-radius: 6px;
		padding: 15px;
		box-sizing: border-box;
	}
	</style>
</head>
<body>
<div id="container">
	<div id="header">
		<div class="title">2048</div>
		<div id="score">0</div>
		<div id="restart">新游戏</div>
	</div>
	<div id="main"></div>
</div>
	
</body>
</html>